import { useState, useEffect } from 'react'

import TodoAdd from './components/TodoAdd'
import TodoFooter from './components/TodoFooter'
import MainSection from './components/MainSection'
import TodoContext from './TodoContext'

// 导入todos样式
import './App.css'

const initialState = [{ id: 1, text: '吃饭', done: false }]

const App = () => {
  const [todos, setTodos] = useState(initialState)
  // 添加任务
  const onAdd = (text: string) => {
    const id = todos.length === 0 ? 1 : todos[todos.length - 1].id + 1
    setTodos([
      ...todos,
      {
        id,
        text,
        done: false
      }
    ])
  }
  // 切换状态
  const onToggle = (id: number) => {
    const newTodos = todos.map(todo => {
      if (todo.id === id) {
        return {
          ...todo,
          done: !todo.done
        }
      }
      return todo
    })
    setTodos(newTodos)
  }
  // 删除任务
  const onDelete = (id: number) => {
    const newTodos = todos.filter(item => {
      return item.id !== id
    })
    setTodos(newTodos)
  }
  const change = (id: number, val: string) => {
    const newTodos = todos.map(todo => {
      if (todo.id === id) {
        // 如果有传入的变量，使用/ / 的方式声明的问题有很多
        // 推荐使用正则对象的方式来构建正则表达式
        let regx = new RegExp(val);
        let regx2 = new RegExp(val, "g");
        console.log(regx);
        // 使用includes更为合理
        if (regx.test(todo.text)) {
          return {
            ...todo,
            text: todo.text.replace(regx2, '')
          }
        } else {
          return {
            ...todo,
            text: todo.text + val
          }
        }
      }
      return todo
    })
    setTodos(newTodos)
  }
  // 本地化  1.读取本地数据 2.数据改变时存储数据
  // 读取localhost中的数据
  useEffect(() => {
    const res = localStorage.getItem('todos')
    if (res) {
      const resTodos = JSON.parse(res)
      setTodos(resTodos)
    }
  }, [])
  // 保存最新的数据到localStorage
  useEffect(() => {
    localStorage.setItem('todos', JSON.stringify(todos))
  }, [todos])
  return (
    <TodoContext.Provider
      value={{
        todos,
        onDeleteTodo: onDelete,
        onToggleTodo: onToggle,
        doChange: change
      }}
    >
      <section className='todoapp'>
        {/* 添加任务 */}
        <TodoAdd onAddTodo={onAdd} />
        {/* 改造的地方 */}
        <MainSection
        // list={todos}
        // onToggleTodo={onToggle}
        // onDeleteTodo={onDelete}
        ></MainSection>
        {/* footer 组件 */}
        <TodoFooter />
      </section>
    </TodoContext.Provider>
  )
}

export default App
